<template>
  <div class="pad5">
          <mu-data-table ref="table" stripe :columns="headers" :data="data" rowKey="id" :key="tableKey">
            <template slot-scope="scope">
              <td :align="col.align" v-for="col in headers" :key="`${scope.row.id}${col.name}`">
                <!--这个ID只是一个自定义的示例-->
                <div class="flrc w100" v-if="col.name === 'id'">
                  <div class="flex1">{{ scope.row.id }}</div>
                  <mu-button v-if="showDel" @click="remove(scope.row.id)" small icon><mu-icon value="close"></mu-icon></mu-button>
                </div>
                <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
              </td>
            </template>
          </mu-data-table>
  </div>
</template>

<script>
import EzListViewer from "@/comps/list/EzListViewer.vue";
import listBuilder from "@/comps/list/listBuilder";
import apiOwner from "@/pages/v1/pm/Owner/js/apiOwner";
import apiCar from "@/pages/v1/pm/Car/js/apiCar";

export default {
  name: "LVPmOwner",
  props:{
    value: {
      type: Array,
      default:[]
    },
    showDel: {
      type: Boolean,
      default: false
    }
  },
  components: {EzListViewer},
  data() {
    let lb = listBuilder()
    lb.add("name","姓名",180)
    lb.add("idCard","身份证号",180)
    lb.add("mobile","手机号",180)
    lb.add("address","地址",180)
    lb.add("remark","备注",0)
    lb.add("id","#",180)
    return {
      headers:lb.headers,
      tableKey:"",
      data:[],
    }
  },
  // mounted() {
  //   if (!this.ids) return
  //
  //   apiOwner.findBy({_where:{id__in:this.ids}},res=>{
  //     this.data = res
  //   })
  // },
  mounted() {
    this.getList()
  },
  methods: {
    getList(){
      if (!this.value) return
      apiOwner.findBy({_where:{id__in:this.value}},res=>{
        this.data = res
      })
    },
    remove(id) {
      let value = this.value
      value.splice(value.indexOf(id),1)
      this.$emit("input",value)
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>